function GraphView() {

    /// storage
    this.markers = [];

    /// geometry
    this.markerW = 2;
    this.markerH = 2;

    this.setViewport(0,0,100,50);

    this.scale_y = 1;
}

GraphView.prototype.setViewport = function(x,y,w,h) {
    this.viewport = {
        x       : 0,
        y       : 0,
        width   : 100,
        height  : 50
    };

    this.viewport.mid_x = x+this.viewport.width/2;
    this.viewport.mid_y = y+this.viewport.height/2;
}

GraphView.prototype.build = function(scene, count) {
    this.markers = [];
    for(var i=0; i<count; i++)
    {
        this.markers[i] = new DrawableEllipse(0, 0, this.markerW, this.markerH);
        scene.GC.addDrawable(this.markers[i]);
    }
}

GraphView.prototype.setInputSource = function(src) {
    if (!src || !(src.getValue instanceof Function))
        throw "GraphView.setInputSource(), src is not a proper input object!";

    this.input = src;
}

GraphView.prototype.layout = function() {
    var dx = this.viewport.width/this.markers.length;
    var mid_y = this.viewport.mid_y;

    for(var i=0; i<this.markers.length; i++)
        this.markers[i].setXY(i*dx, mid_y);
}

GraphView.prototype.shift = function() {
    for(var i=markers.length-1; i>0; i--)
        this.markers[i].y = this.markers[i-1].y;
}

GraphView.prototype.update = function() {
    this.shift();
    this.markers[0].y = this.input.getValue()*this.scale_y;
}